<template>
  <div class="expenditure-bar" >
    <div>
      <el-radio-group size="mini" v-model="dimension">
        <el-radio-button label="日"></el-radio-button>
        <el-radio-button label="月"></el-radio-button>
        <el-radio-button label="年"></el-radio-button>
      </el-radio-group>
      <simple-bar
        :title="title"
        :subtext="'按' + dimension + '统计'"
        id="bar"
        :data="data"
        :legend="types"
        :x-axis-data="times"
      ></simple-bar>
    </div>
  </div>
</template>

<script>
import TimeUtil from "@/util/TimeUtil";
import MathUtil from "@/util/MathUtil";
import SimpleBar from "@/components/echarts/SimpleBar";

export default {
  name: "ExpenditureBar",
  components: {SimpleBar},
  props: {
    start: Number,
    end: Number,
    dataSource: Array,
    title: {
      Type: String,
      default: '支出总览'
    }
  },
  data() {
    return {
      requested: false,
      resolving: false,
      dimension: '日',
      times: [],
      types: [],
      data: []
    }
  },
  methods: {
    async getData() {
      await this.$emit('func');
    },
    resolveData() {
      if (!this.dataSource) {
        return [];
      }
      this.resolving = true;
      let result = []
      let filter = this.dataSource
          .filter(item => this.start <= item.createTime && this.end >= item.createTime);
      //获取总时间维度数组，item的结构为 { billTypeFormatter: 账单类型, amount: 金额, createTime: 时间戳 }
      let times = filter.map(item => item.createTime)
          .sort((a, b) => a - b)
          .map(time => TimeUtil.timestampFormat(time, this.dimension))
          // .sort((a, b) => a.localeCompare(b) )
          .distinct();

      //获取账单类型数组
      let types =filter.map(item => item.billTypeFormatter).distinct();

      //将时间数组转map结构减少循环次数
      let timeMap = {}
      for (let i = 0; i < times.length; i++) {
        timeMap[times[i]] = i;
      }

      types.forEach(type => {
        let map = {
          name: type,
          type: 'bar',
          data: times.map(() => 0)
        };
        filter.filter(item => item.billTypeFormatter === type)
            .forEach(item => {
              let time = TimeUtil.timestampFormat(item.createTime, this.dimension);
              let index = timeMap[time];
              map.data[index] = MathUtil.Add(map.data[index], item.amountFormatter);
            });
        result.push(map);
      })

      //总数
      let total = {
        name: '总数',
        type: 'bar',
        data: times.map(() => 0)
      };
      result.forEach(item => {
        for (let i = 0; i < total.data.length; i++) {
          total.data[i] = MathUtil.Add(total.data[i], item.data[i]);
        }
      });

      types.push(total.name);
      result.push(total);
      this.times = times;
      this.types = types;
      this.data = result;
      this.resolving = false;
    }
  },
  watch: {
    start() {
      if (!this.requested && this.start && this.end && !this.dataSource) {
        this.requested = true
        this.getData();
      }

      if (this.requested && !this.resolving) {
        this.resolveData();
      }
    },
    end() {
      if (!this.requested && this.start && this.end && !this.dataSource) {
        this.requested = true
        this.getData();
      }

      if (this.requested && !this.resolving) {
        this.resolveData();
      }
    },
    dataSource(value) {
      if (value) {
        this.resolveData();
      }
    },
    dimension() {
      if (this.requested && !this.resolving) {
        this.resolveData();
      }
    }
  }
}
</script>

<style scoped lang="less">
  .expenditure-bar,.simple-bar,.expenditure-bar > div {
    height: 100%;
    width: 100%;
  }

  .expenditure-bar {
    padding-top: 20px;
  }

  .el-radio-group {
    z-index: 99;
    position: absolute;
    top: 10px;
    right: 30px;
  }


</style>
